<template>
  <main>
    <div style="width: 1100px; height: 500px">
      <c-table
        v-model:selected="data.selectRows"
        row-key="id"
        showIndex
        :columns="columns"
        :selectionProps="selectionProps"
        isRowClick
        ref="mxTable"
        @getList="getList"
      >
        <template #top>
          <div class="header-search">
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />
            <el-input class="input-width spacing" placeholder="Please input" />

            <el-button class="spacing" type="primary">查询</el-button>
            <el-button class="spacing">重置</el-button>
          </div>
        </template>

        <template #bottomLeft>
          <el-button type="primary">
            批量删除({{ data.selectRows.length }})
          </el-button>

          <c-button customType="confirm" type="primary" @click="handleClick">
            cButton
          </c-button>
        </template>
      </c-table>

      <c-input
        placeholder="请输入"
        style="width: 200px"
        v-model="data.inputVal"
        @change="inputChange"
      ></c-input>

      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="Activity name" prop="name">
          <c-input
            placeholder="请输入"
            clearable
            style="width: 200px"
            v-model="ruleForm.name"
          ></c-input>
        </el-form-item>
      </el-form>
    </div>
  </main>
</template>

<script setup lang="tsx">
import { reactive, ref } from "vue";

const selectionProps = ref({
  selectable: (row, index) => {
    // console.log(row, index);
    return row.id !== 1; // 是否可勾选, true:不禁用,false:禁用
  },
});
function inputChange(value) {
  console.log(value, "来了1");
  // data.inputVal = value;
}
function handleClick() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("success");
    }, 2000);
  });
  // console.log(222);
}

interface RuleForm {
  name: string;
  age?: number;
}

const ruleForm = reactive<RuleForm>({
  name: "",
});
const rules = {
  name: [
    { required: true, message: "请输入name", trigger: "blur" },
    { min: 3, max: 5, message: "长度在3 到 5 之间", trigger: "blur" },
  ],
};
const data = reactive({
  selectRows: [{ id: 3 }],
  tabData: [
    {
      date: "2016-05-03",
      name: "2222",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-02",
      name: "3333333",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-04",
      name: "Tom3",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom4",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      test1: "防守打法",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tomdd",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tombb",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tomaa",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-01",
      name: "Tomxx",
      address: "No. 189, Grove St, Los Angeles",
    },
  ],
  label: "",
  inputVal: "在",
});
const mxTable = ref(null);

function deleteRow(row, column, idx) {
  // console.log(row, column, idx, "r");
  data.tabData.splice(idx, 1);
  mxTable.value.reload({ quantity: 1 });
}

const columns = [
  { prop: "date", label: "日期222" },
  {
    prop: "name",
    showOverflowTooltip: false,
    customHeader: () => "自定义header",
  },
  {
    label: "日期",
    columns: [
      {
        label: "test1",
        customRender: ({ row, column, idx }) => (
          <c-input
            modelValue={row.test1}
            onInput={(val) => {
              console.log(val);
              row.test1 = val;
            }}
          ></c-input>
        ),
      },
      { prop: "test2", label: "test2" },
    ],
  },
  {
    label: "操作",
    // fixed: "right",
    width: 130,
    customRender: ({ row, column, idx }) => (
      <el-button
        onClick={(e) => {
          e.stopPropagation();
          deleteRow(row, column, idx);
        }}
      >
        删除
      </el-button>
    ),
  },
];
/*const getList = () => {
  return {
    rows: data.tabData.map((item, idx) => ({ ...item, id: idx + 1 })),
    total: data.tabData.length,
  };
};*/
function rowClick(row, column, event) {
  console.log(row, column, event, "row, column, event");
}

const getList = (page) => {
  // console.log(page, "page");
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const rows = data.tabData.map((item, idx) => ({ ...item, id: idx + 1 }));
      resolve({ rows: rows, total: data.tabData.length });
    }, 1000);
  });
};
</script>

<style scoped lang="less">
@import url("@/assets/style/header-search.less");
</style>
